<!DOCTYPE html>
<html lang="ch-zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <title>用户注册</title>
</head>

<body>

    <div class="container">
        <div class="include" file="headbar.html"></div>
        <br/><br/>

        <div class="row">
            <div class="input-group mb-3">
                <span class="input-group-text">账号</span>
                <input type="text" class="form-control" placeholder="账号" id="input_id" aria-label="账号" aria-describedby="basic-addon1">
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text">姓名</span>
                <input type="text" class="form-control" placeholder="姓名" id="input_name" aria-label="姓名" aria-describedby="basic-addon1">
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text">电话</span>
                <input type="text" class="form-control" placeholder="电话" id="input_phone" aria-label="电话" aria-describedby="basic-addon1">
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text">地址</span>
                <input type="text" class="form-control" placeholder="地址" id="input_address" aria-label="地址" aria-describedby="basic-addon1">
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text">邮政编码</span>
                <input type="number" class="form-control" placeholder="邮政编码" id="input_number" aria-label="邮政编码" aria-describedby="basic-addon1">
            </div>
        </div>

        <div class="d-grid gap-2 col-4 mx-auto">
            <button class="btn btn-primary" type="button" onclick="signUp()">注册</button>
        </div>
    </div>
</body>
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.js" charset="UTF-8"></script>
<script>
    $(".include").each(function() {
        if (!!$(this).attr("file")) {
            var $includeObj = $(this);
            $(this).load($(this).attr("file"), function(html) {
                $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
            })
        }
    });

    url0 = 'http://localhost:80/index.php/Mysql/'

    function signUp() {
        var input_id = document.getElementById('input_id').value;
        var input_name = document.getElementById('input_name').value;
        var input_phone = document.getElementById('input_phone').value;
        var input_address = document.getElementById('input_address').value;
        var input_number = document.getElementById('input_number').value;
        var inputdata = {
            "input_id": input_id,
            "input_name": input_name,
            "input_phone": input_phone,
            "input_address": input_address,
            "input_number": input_number
        }
        $.ajax({
            methods: "GET",
            url: url0 + "mysql_add_customer/",
            async: pageYOffset,
            contentType: "application/x-www-form-urlencoded",
            data: inputdata,
            dataType: "json",
            success: function(data) {
                if (data == "account repeat") {
                    alert('该账号已存在，请尝试其他账号！');
                    return 0;
                }
                if (data == "success") {
                    alert('已添加该用户！')
                    return 0;
                }
            },
            error: function(err) {
                // 请求失败， err是失败的内容
                print("请求失败");
            },
            complete: function(e) {
                // 不管成功还是失败都会调用这个函数
            }
        })
    }
</script>

</html>